<template>
  <view class="fixed-search px-4 box-border flex h-12 items-center fixed top-0 z-10 bg-white w-full">
    <picker mode="date" fields="month" class="h-full flex items-center" @change="confirmMonth">
      <view class="h-full" style="width: 640rpx;">
        <text class="text-gray-400 text-sm" v-if="!pageQuery.month">选择日期</text>
        <text v-else>{{ pageQuery.month }}</text>
        <!--<input v-model="pageQuery.month" style="width: 600rpx;" type="text" disabled placeholder="选择日期" placeholder-class="plcg">-->
      </view>
    </picker>
    <view class="block mx-auto">
      <image @click="clearMonth" src="@/static/image/close.png" class="w-5 h-5"></image>
    </view>

  </view>

  <!--占位-->
  <view class="h-12"></view>

  <view v-if="total">
    <Card v-for="(item, index) in dataList" :dataSource="item" :key="index"></Card>
  </view>

  <view v-else>
    <image class="w-20 h-16 block m-auto mt-14" src="@/static/image/noData.png"></image>
    <view class="mt-2 text-center text-gray-400 text-sm">暂无数据</view>
  </view>
</template>

<script setup lang="ts">
    import { getMarketCoinListApi } from '@/api/marketing'
    import { ref, onMounted } from "vue";
    import Card from './components/card.vue'
    import { onLoad, onReachBottom } from "@dcloudio/uni-app";

    onLoad(() => {
      getRechargeList()
    })

    const pageQuery = ref({
      page: 1,
      limit: 20,
      month: ''
    })
    const total = ref<number>(0)
    const dataList = ref<any[]>([])

    const getRechargeList = async () => {
      const res = await getMarketCoinListApi(pageQuery.value)
      total.value = res.data.total
      dataList.value = [ ...dataList.value, ...res.data.data]
    }

    /** 选择月份 **/
    const confirmMonth = (event) => {
      pageQuery.value.page = 1
      dataList.value = []
      pageQuery.value.month = event.detail.value
      getRechargeList()
    }

    /** 清除月份 **/
    const clearMonth = () => {
      pageQuery.value.page = 1
      dataList.value = []
      pageQuery.value.month = ''
      getRechargeList()
    }

    /** 滚动底部 **/
    onReachBottom(() => {
      if(dataList.value.length < total.value) {
          pageQuery.value.page += 1;
          getRechargeList()
      }
    })
</script>

<style scoped lang="scss">
.fixed-search {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.box {
  padding: 10rpx 0;
  border: 2rpx solid #e5e7e9;
  border-top: 0;
  overflow-y: hidden;
}

.shrink-move-enter-active, .shrink-move-leave-active {
  transition: opacity .5s;
}
.shrink-move-enter-from, .shrink-move-leave-to {
  opacity: 0;
}

</style>
